<template>
  <el-container>
    <el-header class="lich-header">
      <Navbar v-bind:user="user" v-bind:page_type="page_type"/>
    </el-header>
    <el-main>
      <el-row :gutter="5">
        <el-col :xl="{span: 16, offset: 4}" :lg="{span: 18, offset: 3}" :md="{span: 20, offset: 2}"
                :sm="{span: 22, offset: 1}"
                :xa="{span: 24, offset: 0}" style="margin-bottom: 20px;">
          <el-alert
            v-if="this.msg !== ''"
            :title="this.msg"
            type="error">
          </el-alert>
          <el-card>
            <el-form :model="form" class="bd">
              <el-form-item label="标题">
                <el-input v-model="form.title" class="lg" placeholder="请输入标题" @focus="reset_label"></el-input>
              </el-form-item>
              <el-form-item label="正文">
                <el-input v-model="form.text" class="lg" placeholder="请输入正文" type="textarea" rows="20"
                          @focus="reset_label"></el-input>
              </el-form-item>
              <el-form-item label="标签" v-if="form.label!==''">
                <span class="tag"
                      :class="{red: form.label === '利好', green: form.label === '利空', m: form.label === '中性'}">
                  {{ form.label }}
                </span>
              </el-form-item>
            </el-form>
            <div style="text-align: center; padding-top: 20px;">
              <el-button type="primary" @click="paladin">提交</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import Navbar from '~/components/Navbar.vue'
  import axios from 'axios'

  let _c = require('~/assets/config');

  export default {
    components: {
      Navbar
    },
    async asyncData({req, redirect, $axios}) {
      let opt = {};
      let _h = _c.API_HOST;
      if (process.server) {
        opt.headers = {
          "Cookie": req.headers.cookie + ";"
        };
      } else {
        $axios.defaults.withCredentials = true;
      }
      let {user} = await $axios.$get(`${_h}/user/islogin`, opt);
      let u;
      if (user === null || user === undefined) {
        redirect('/login');
      } else {
        u = {
          isLogin: true,
          isAdmin: user.is_admin,
          userName: user.name,
          userId: user.id
        }
      }
      let _f = {
        title: '',
        text: '',
        label: ''
      };
      let _p = {
        _a: true,
        _b: false
      };
      return {
        msg: '', form: _f, user: u, page_type: _p
      }
    },
    methods: {
      paladin: function () {
        axios.defaults.withCredentials = true;
        let _h = _c.API_HOST;
        let _v = this;
        axios.post(`${_h}/api/paladin`, {
          "title": _v.form.title,
          "data": _v.form.text
        }).then((res) => {
          let _d = res.data;
          if (_d.id === -1000) {
            _v.msg = '服务器错误'
          } else if (_d.id === -12) {
            _v.$router.push({path: '/login'});
          } else if (_d.id === 0) {
            _v.form.label = _d.data.label;
          }
        })
      },
      reset: function () {
        this.form.title = '';
        this.form.text = '';
        this.reset_label();
      },
      reset_label: function () {
        this.form.label = '';
      }
    }
  }
</script>

<style>
  .lich-header {
    text-align: right;
  }

  .bd {
    padding-left: 3%;
    padding-right: 3%;
    text-align: right;
  }

  .lg {
    margin-left: auto;
    margin-right: auto;
  }

  .red {
    color: #d7211b;
  }

  .green {
    color: #4f911b;
  }

  .m {
    color: #61619e;
  }
</style>
